<template>
  <div class="box">
    <!-- 头部搜索模块 -->
    <headerSearch :selectObj="selectObject" :isShowAdd="menuFlag" :goSearchFc="searchClickYard" :addFun="add" />
    <!-- 中间表格模块 -->
    <BaseTable :data="yardTableData" :columns="yardDataColumns" :tableHeight="tableHeight" :pagination="false"
      :loading="loading">
      <el-table-column slot="operationColumn" fixed="right" align="center" label="操作" width="150px">
        <template scope="scope">
            <el-button size="mini" title="编辑" v-hasPermi="['basicDataSubsystem:yard:yardUpdate']"
              @click.stop="handleEdit(scope.$index, scope.row)"><span style='color:#0B6CD6'><i
                  class='iconfont icon-1-07'></i>编辑</span></el-button>
            <el-button size="mini" title="删除" v-hasPermi="['basicDataSubsystem:yard:yardDelete']"
              @click.stop="handleDelete('1', scope.row.id)"><span style='color:#F75E5E'><i
                  class='iconfont icon-1-08'></i>删除</span></el-button>
        </template>
      </el-table-column>
    </BaseTable>
    <div class="page">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="startpage" :page-sizes="[10, 15, 20, 25, 30]" :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper" :total="totalNum"></el-pagination>
    </div>
    <!-- 新增堆场 -->
    <el-drawer :before-close="handleClose" title="新增堆场信息" :visible.sync="addleixingMod" direction="rtl">
      <el-form size="small" :rules="Rules" ref="formRefs" :model="form" style="padding:10px 20px">
        <el-form-item label="堆场名称" prop="yardName" :label-width="formLabelWidth">
          <el-input @input="form.yardName = verifyfilter('charSpace', form.yardName)" v-model="form.yardName"
            autocomplete="off" ></el-input>
        </el-form-item>
        <el-form-item label="是否港内堆场" prop="isInport" :label-width="formLabelWidth">
          <el-select clearable v-model="form.isInport" placeholder="请选择" style="width: 100%" >
            <el-option v-for="item in isInportList" :key="item.value" :label="item.label"
              :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="排序号" prop="sortNum" :label-width="formLabelWidth">
          <el-input @input="form.sortNum = verifyfilter('latinSpace', form.sortNum)" v-model="form.sortNum"
            autocomplete="off" ></el-input>
        </el-form-item>
        <el-form-item label="备注" :label-width="formLabelWidth">
          <el-input v-model="form.remark" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div class="demo-drawer__footer">
        <el-button size="small" type="primary" @click="addList()">保 存</el-button>
      </div>
    </el-drawer>

    <!-- 编辑堆场 -->
    <el-drawer :before-close="handleClose" title="修改堆场信息" :visible.sync="editleixMod">

      <el-form size="small" :rules="Rules" ref="editformRefs" :model="nowData" style="padding:10px 20px">
        <el-form-item label="堆场名称" prop="yardName" :label-width="formLabelWidth"
          :rules="[{ required: true, message: '堆场名称不能为空' }]">
          <el-input @input="nowData.yardName = verifyfilter('charSpace', nowData.yardName)" v-model="nowData.yardName"
            autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="是否港内堆场" prop="isInport" :label-width="formLabelWidth"
          :rules="[{ required: true, message: '请选择是否港内堆场' }]">
          <el-select clearable v-model="nowData.isInport" placeholder="港内堆场" style="width: 100%">
            <el-option v-for="item in isInportList" :key="item.value" :label="item.label"
              :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="排序号" prop="sortNum" :label-width="formLabelWidth"
          :rules="[{ required: true, message: '排序号不能为空' }]">
          <el-input @input="nowData.sortNum = verifyfilter('latinSpace', nowData.sortNum)" v-model="nowData.sortNum"
            autocomplete="off" ></el-input>
        </el-form-item>
        <el-form-item label="备注" :label-width="formLabelWidth">
          <el-input v-model="nowData.remark" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div class="demo-drawer__footer">
        <el-button size="small" type="primary" @click="editTypeList()">保 存</el-button>
      </div>
    </el-drawer>

  </div>
</template>

<script>
import Utils from '@/libs/Utils.js'
import BaseTable from '@/components/BaseTable'
import BaseForm from '@/pages/SystemPage/system/component/form.vue'
import headerSearch from './component/headerSearch'
export default {
  name: 'deviceTypeInformation',
  components: {
    BaseForm,
    BaseTable,
    headerSearch
  },
  data() {
    return {
      oldValA: {},
      oldValB: {},
      oldValC: {},
      oldValD: {},
      selectObject: [{
        name: '堆场名称',
        type: 'input',
        modelName: 'yardName'
      }],
      menuFlag: false,
      // 字典列表数据
      yardDataColumns: [
        {
          prop: 'yardName',
          label: '堆场名称'
        },
        {
          prop: 'isInport',
          label: '是否港内堆场',
          render(h, params) {
            if (params.row.isInport == 'Y') {
              return h('el-tag', {
                props: {
                  size: 'mini',
                  type: 'success'
                },
                domProps: {
                  innerHTML: '是'
                }
              })
            }
            return h('el-tag', {
              props: {
                size: 'mini',
                type: 'danger'
              },
              domProps: {
                innerHTML: '否'
              }
            })
          }
        },
        {
          prop: 'sortNum',
          label: '排序号'
        },
        {
          prop: 'remark',
          label: '备注'
        }
      ],
      yardTableData: [],
      loading: false,
      iloading: false,
      menuArr: [],
      statusFlag: false,
      // 查询
      paramform: {
        yardName: ''
      },
      // 查询堆场信息
      form: {
        yardName: '',
        isInport: '',
        sortNum: '',
        remark: '',
        delFlag: '0'
      },
      isInportList: [
        {
          value: 'Y',
          label: '是'
        }, {
          value: 'N',
          label: '否'
        }
      ],
      startpage: 1,
      startpage1: 1,
      ids: [], // 批量删除
      formLabelWidth: '120px', // form的item宽度
      editleixMod: false,
      addleixingMod: false,
      exlc: false,
      addzidian: false,
      editzidian: false,
      nowData: {}, // 临时存放操作数据
      Rules: {
        yardName: [
          {
            required: true,
            message: '堆场名称不能为空',
            trigger: 'blur'
          }
        ],
        isInport: [
          {
            required: true,
            message: '请选择是否为港内堆场',
            trigger: 'blur'
          }
        ],
        sortNum: [
          {
            required: true,
            message: '排序号不能为空',
            trigger: 'blur'
          }
        ]
      },
      // 分页
      currentPage: 1,
      totalNum: 1,
      totalNum1: 1, // 总条数
      pagesize: 10,
      pagesize1: 10,
      dicttype: '',
      // 批量删除
      id: [],
      ref: ''
    }
  },
  // async activated() {
  //   var menuArr = []
  //   var menuId = ''
  //   if (localStorage.getItem('menuArr')) {
  //     menuArr = JSON.parse(localStorage.getItem('menuArr'))
  //   }
  //   menuArr.map(item => {
  //     item.children.map(v => {
  //       if (window.location.href.includes(v.url)) {
  //         menuId = v.id
  //       }
  //     })
  //   })

  //   if (menuId) {
  //     this.menuArr = []

  //     await this.$http.get(`/${this.$ServiceName}/api/external/sysmenubtn/listresourcebtnbyid?menuId=${menuId}`, { timeout: 30000 })
  //       .then(res => {
  //         res.data.data.map(item => {
  //           this.menuArr.push(item.RESOURCENAME)
  //         })
  //         if (!this.menuArr.includes('堆场新增')) {
  //           this.menuFlag = false
  //         } else {
  //           this.menuFlag = true
  //         }
  //       }).catch((error) => {})
  //   }
  //   if (this.$store.state.app.searchResouce === 'menu') {
  //     this.paramform = {
  //       dictName: '',
  //       dictType: '',
  //       remark: '',
  //       status: ''
  //     }
  //     this.getData()
  //   }
  // },
  computed: {
    tableHeight() {
      return this.$store.state.tableHeight
    },
    itableHeight() {
      return this.$store.state.tableHeight + 50
    }
  },
  methods: {
    handleClose(done) {
      let oldV = {}
      let newV = {}
      if (this.addleixingMod) {
        oldV = this.oldValA
        newV = this.form
      }
      if (this.addzidian) {
        oldV = this.oldValB
      }
      if (this.editleixMod) {
        oldV = this.oldValC
        newV = this.nowData
      }
      if (this.editzidian) {
        oldV = this.oldValD
        newV = this.nowData
      }
      if (!Utils.compareData(oldV, newV)) {
        this.$confirm('修改的数据未保存，是否关闭？')
          .then(_ => {
            done()
            const ref = this.ref // editTypeData  editDataRef formRefs addForm
            this.$nextTick(() => {
              if (ref === 'editformRefs') {
                if (this.$refs['editformRefs'] !== undefined) {
                  this.$refs['editformRefs'].resetFields()
                }
              }
              if (ref === 'editDataRef') {
                if (this.$refs['editDataRef'] !== undefined) {
                  this.$refs['editDataRef'].resetFields()
                }
              }
              if (ref === 'formRefs') {
                if (this.$refs['formRefs'] !== undefined) {
                  this.$refs['formRefs'].resetFields()
                }
              }
              if (ref === 'addForm') {
                if (this.$refs['addForm'] !== undefined) {
                  this.$refs['addForm'].resetFields()
                }
              }
            })
          })
          .catch(_ => { })
      } else {
        done()
        const ref = this.ref // editTypeData  editDataRef formRefs addForm
        this.$nextTick(() => {
          if (ref === 'editformRefs') {
            if (this.$refs['editformRefs'] !== undefined) {
              this.$refs['editformRefs'].resetFields()
            }
          }
          if (ref === 'editDataRef') {
            if (this.$refs['editDataRef'] !== undefined) {
              this.$refs['editDataRef'].resetFields()
            }
          }
          if (ref === 'formRefs') {
            if (this.$refs['formRefs'] !== undefined) {
              this.$refs['formRefs'].resetFields()
            }
          }
          if (ref === 'addForm') {
            if (this.$refs['addForm'] !== undefined) {
              this.$refs['addForm'].resetFields()
            }
          }
        })
      }
    },
    // 字典类型新增弹出框
    add() {
      this.ref = 'formRefs'
      if (!this.addleixingMod) {
        this.addleixingMod = true
        this.form = this.$options.data().form;
      }

      this.oldValA = { equipment_type_code: '', equipment_type_name: '' }
      this.$nextTick(() => {
        this.$refs.formRefs.resetFields()
      })
    },

    // 修改设备类型弹出
    async handleEdit(index, row) {
      this.ref = 'editformRefs'
      const res = await this.$http.get(
        `/${this.$ServiceName}/api/external/yard/querybyid?id=${row.id}`
      )
      if (res.data.success) {
        this.nowData = res.data.data
        this.oldValC = JSON.parse(JSON.stringify(this.nowData))
      } else {
        return false
      }

      if (!this.editleixMod) {
        this.editleixMod = true
      }
    },

    async editTypeList() {
      this.form.id = this.nowData.id
      this.form.yardName = this.nowData.yardName
      this.form.isInport = this.nowData.isInport
      this.form.sortNum = this.nowData.sortNum
      this.form.remark = this.nowData.remark

      this.$refs['editformRefs'].validate(async valid => {
        if (valid) {
          const res = await this.$http.put(
            `/${this.$ServiceName}/api/external/yard/update`,
            this.form
          )
          if (res.status === 200) {
            if (res.data.success) {
              if (this.editleixMod) {
                this.editleixMod = false
              }
              this.getData()
              return this.$message.success(res.data.msg)
            }
            return this.$message.warning(res.data.msg)
          }
          this.$message.error('获取数据失败！')
        } else {
          return
        }
      })
    },

    // 新增堆场信息
    addList() {
      this.$refs['formRefs'].validate(async valid => {
        if (valid) {
          const res = await this.$http.post(
            `/${this.$ServiceName}/api/external/yard/insert`,
            this.form
          )
          if (res.status === 200) {
            if (res.data.success) {
              if (this.addleixingMod) {
                this.addleixingMod = false
              }
              this.getData()
              return this.$message.success(res.data.msg)
            }
            return this.$message.warning(res.data.msg)
          }
          this.$message.error('新增失败！')
        } else {
          return false
        }
      })
    },
    // 删除堆场信息
    async subDelete(id) {
      const res = await this.$http.delete(
        `/${this.$ServiceName}/api/external/yard/deletebyid?id=${id}`
      )
      if (res.data.code != '0000') {
        return this.$message.error(res.data.msg)
      }
      this.$message.success(res.data.msg)
      this.getData()
    },

    // 删除提示
    async handleDelete(flag, id) {
      const confirmRes = await this.$confirm(
        '此操作将永久删除该数据, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch(err => {})
      if (confirmRes !== 'confirm') {
        return this.$message.info('已经取消删除')
      }
      this.subDelete(id)
    },

    // 查询堆场
    async getData() {
      this.loading = true
      if (this.pagesize === 0) {
        this.startpage = 1
      }
      if (!this.paramform.yardName) {
        this.paramform.yardName = ''
      }
      const res = await this.$http.get(
        `/${this.$ServiceName}/api/external/yard/queryall?startpage=${this.startpage}&pagesize=${this.pagesize}&yardName=${this.paramform.yardName}`
      )

      if (res.status == 200) {
        this.loading = false
        if (res.data.success) {
          this.yardTableData = res.data.data.pages

          // 分页
          this.startpage = res.data.data.pageNum // 当前页
          this.totalNum = parseInt(res.data.data.totalNum) // 总数量
          this.pagesize = res.data.data.pageSize //
        }
      } else {
        this.$message.error('获取数据失败！')
      }
    },
    clickSearchSon() {
      this.startpage1 = 1
      this.getListData()
    },

    // 每页显示的条数
    handleSizeChange(val) {
      this.pagesize = val
      this.getData()
    },
    // 当前页
    handleCurrentChange(val) {
      this.startpage = val
      this.getData()
    },
    // 每页显示的条数
    handleSizeCha(val) {
      this.pagesize1 = val
      this.getListData()
    },
    // 当前页
    handleCurrentCha(val) {
      this.startpage1 = val
      this.getListData()
    },
    // 清除当前页
    clearCurrentPage() {
      this.startpage = 1
    },

    searchData() {
      this.startpage = 1
      this.getData()
    },
    searchClickYard(searchData) {
      this.startpage = 1
      this.paramform = Object.assign(this.paramform, searchData);
      this.getData()
    }
  }
}
</script>

<style lang="less" scoped>
/deep/.el-table {
  max-height: none !important;
}

.selectBox {
  justify-content: space-between;
  display: flex;

  background: #ffffff;
  border: 1px solid #e1e4eb;
  border-left: none;

  height: 50px;
  padding-top: 11px;
  padding-left: 14px;
  padding-right: 20px;
}

/deep/ .el-drawer__header {
  margin-bottom: 0;
  padding: 16px;
  border-bottom: 1px solid gainsboro;
}

/deep/ .el-button--primary {
  background-color: #338ce8;
  border-color: #338ce8;
}

.page {
  background: #ffffff;
  border-radius: 4px 4px 0 0;
  padding: 0 1rem;
}

.box {
  background: #ffffff;
  border: 1px solid #e1e4eb;
  border-radius: 4px 4px 0 0;
  border-top: none;
}

.title {
  background: #f5f7fa;
  height: 40px;
  line-height: 40px;

  p {
    font-family: MicrosoftYaHei;
    font-size: 16px;
    color: #303133;
    letter-spacing: 0;
    line-height: 16px;
    padding-left: 14px;
    line-height: 40px;
  }
}

/deep/ .el-table .cell {
  white-space: nowrap;
}

/deep/ .el-form-item--mini .el-form-item__label {
  line-height: 0;
}

/deep/ .el-pagination {
  text-align: right;
  padding: 10px 5px;
}

/deep/ .el-table th>.cell {
  font-family: PingFangSC-Semibold;
  font-size: 14px;
  color: #606266;
}

/deep/ .el-table .el-button:focus,
.el-table .el-button:hover {
  background-color: #fff;
  border: 1px solid #e1e4eb;
}

/deep/ .el-table .el-button--mini {
  color: #1684f6;
  border-color: transparent;
  background: transparent;
}

/deep/ .el-table th {
  border-left: 1px solid #ebeef5;
}

/deep/ .el-table th:nth-child(1) {
  border-left: none;
}

/deep/ .el-table--striped .el-table__body tr.el-table__row--striped td {
  background: #f5f7fa;
}

.right /deep/ .el-button--mini {
  padding: 7px 6px;
}

/deep/.el-pagination.is-background .btn-next,
/deep/ .el-pagination.is-background .btn-prev,
/deep/ .el-pagination.is-background .el-pager li {
  background: #ffffff;
  border: 1px solid #e1e4eb;
  border-radius: 3px;
  border-radius: 3px;
}

/deep/ .el-button+.el-button {
  margin-left: 3px;
}

.asa {
  display: inline;

  /deep/ .el-button--mini,
  .el-button--mini.is-round {
    padding: 7px 6px;
  }
}

.selectBox1 {
  justify-content: space-between;
  display: flex;
  flex-direction: row-reverse;
  background: #ffffff;
  border: 1px solid #e1e4eb;
  border-left: none;
  line-height: 28px;
  height: 37px;
  padding-top: 11px;
  padding-left: 14px;
  padding-right: 20px;
}

.excelBox /deep/ .el-drawer__open .el-drawer.rtl {
  width: 50% !important;
}

/deep/ .el-form-item--mini.el-form-item {
  line-height: 28px;
}

/deep/ .demo-drawer__footer {
  text-align: right;
  padding-right: 1rem;
  border-top: 1px solid #c8cfde;
  background-color: #f5f7fa;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  line-height: 50px;
}
</style>
